<template>
  <p>eat: {{ obj.hobby.eat }}</p>
  <button @click="update">update eat</button>
</template>

<script>
import { isReactive, reactive, ref, watch } from 'vue'
export default {
  setup() {
    const obj = reactive({
      name: 'ifer',
      hobby: {
        eat: '西瓜',
      },
    })

    // 铺垫：reactive 数据内部的【对象】也是一个 reactive
    // console.log(isReactive(obj.hobby))

    const update = () => {
      // 对 reactive 数据自身的修改，并不会触发监听
      obj.hobby = {
        eat: '面条',
      }
    }
    // 监听的是 obj.hobby 内部数据的变化，对 obj.hobby 自身的修改并不会触发监听
    watch(obj.hobby, (newValue, oldValue) => {
      console.log(newValue === oldValue)
    })
    return { obj, update }
  },
}
</script>
